<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.101.0">
    <title>Cover Template · Bootstrap v4.6</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/cover/">


    <!-- Bootstrap core CSS -->
    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">


    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>


    <!-- Custom styles for this template -->
    <link href="LearnEnglish/cover.css" rel="stylesheet">

    <script src="../vue/vue.global.js"></script>
    <!--书籍-->
    <script src="LearnEnglish/phrase/罗马假日.js"></script>
    <script src="LearnEnglish/phrase/早安英语.js"></script>
    <script src="LearnEnglish/phrase/50句子700词.js"></script>
    <script src="LearnEnglish/phrase/50短句.js"></script>
    <!--工具-->
    <script src="LearnEnglish/utils/BookUtils.js"></script>
    <script src="LearnEnglish/utils/ReadUtils.js"></script>
    <script src="LearnEnglish/utils/FileUtils.js"></script>
</head>
<body class="text-center">
<span id="app" class="langWithe">

    <div class="cover-container d-flex w-100 h-100 h3000 p-3 mx-auto flex-column" v-if="initFinish">
        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">Cover</h3>
                <nav class="nav nav-masthead justify-content-center">
                    <a class="nav-link active" href="#">Home</a>
                    <a class="nav-link" href="#" @click="changeBook(bookEnum.BOOK50TO700Words)">50句子7000词</a>
                    <a class="nav-link" href="#" @click="changeBook(bookEnum.BOOK50Words)">50短句</a>
                    <a class="nav-link" href="#" @click="changeBook(bookEnum.LuoMaJiaRi)">罗马假日</a>
                    <a class="nav-link" href="#" @click="changeBook(bookEnum.ZaoAnYingYu)">早安英语</a>
                </nav>
            </div>
        </header>

        <main role="main" class="inner cover">
            <h1 class="cover-heading hide70">Practice in English.</h1>
            <p class="lead hide70">Displaying hidden words on a single card can better aid memory.</p>
            <p class="lead">
                <button type="button" class="btn btn-warning mr5 mb5 width50" @click="previousPhrase()">Prev</button>
                <button type="button" class="btn btn-warning mr5 mb5 width50" @click="nextPhrase()">Next</button>
            </p>

            <template v-if="currentPhrase">

                <!--图片切换功能-->
                <!--<p class="lead">
                    <div class='picA'>
                        <div class='picB'>
                            <div readonly class='resizeElement'></div>
                        </div>
                    </div>
                </p>-->
                <!--直接显示英文语句-->
                <!--<p class="lead">
                    <span class="englishColor">{{currentPhrase.EnglishPhrase}}</span>
                </p>-->

                <!--显示英文语句-->
                 <p class="lead mb25">
                      <template v-for="(word,index ) in currentPhrase.EnglishWordInfo.SuccessWords">
                        <span :class="currentPhrase.EnglishWordInfo.SelectedWords[index] == currentPhrase.EnglishWordInfo.SuccessWords[index]?'englishColorYellow mr5 mb5':'englishColor mr5 mb5'">
                            {{word}}
                        </span>
                     </template>
                </p>

                <!--显示中文语句-->
                <p class="lead mb25">
                    <span class="chineseColor">{{currentPhrase.ChinesePhrase}}</span>
                </p>


                <!--显示英文语句，默认用下划线隐藏-->
                <!--<p class="lead mb25">
                      <template v-for="(word,index ) in currentPhrase.EnglishWordInfo.SelectedWords">
                        <span :class="currentPhrase.EnglishWordInfo.SelectedWords[index] == currentPhrase.EnglishWordInfo.SuccessWords[index]?'fontSuccess mr5 mb5':'fontWarning mr5 mb5'">
                            {{word}}
                        </span>
                     </template>
                </p>-->



                <p class="lead">
                     <template v-for="(word,index ) in currentPhrase.EnglishWordInfo.Words">
                         <!--顺序显示，点击隐藏-->
                         <button type="button"
                                 :class="currentPhrase.EnglishWordInfo.WordsClass[index]"
                                 :disabled="currentPhrase.EnglishWordInfo.WordsEnabled[index]"
                                 @click="selectedWord(word,index)">{{word}}</button>
                     </template>
                </p>


                <p class="lead">
                     <template v-for="(word,index ) in currentPhrase.ChineseWordInfo.Words">

                         <!--顺序显示，点击隐藏-->
                         <button type="button" :class="buttonColorClass(index)"
                                 @click="changeShowHide(currentPhrase.ChineseWordInfo.ShowFlags,index)">{{currentPhrase.ChineseWordInfo.ShowFlags[index] ? currentPhrase.ChineseWordInfo.Words[index] : currentPhrase.ChineseWordInfo.HideWords[index]}}</button>
                     </template>
                </p>
            </template>

        </main>

        <footer class="mastfoot mt-auto">
            <div class="inner">
                <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a
                        href="https://twitter.com/mdo">@mdo</a>.</p>
                <br>
            </div>
        </footer>
    </div>
</span>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                message: 'Hello Vue!',
                /**
                 * 字段列表
                 * */
                phraseList: undefined, // 短句列表
                currentPhrase: undefined, // 当期句学习
                /**
                 * 字段
                 * */
                bookEnum: getBookEnum(),
                /**
                 * 颜色
                 * */
                colorList: [
                    "btn mr5 mb5 btn-primary"
                    , "btn mr5 mb5 btn-success"
                    , "btn mr5 mb5 btn-danger"
                    , "btn mr5 mb5 btn-warning"
                    , "btn mr5 mb5 btn-info"],
                /**
                 * 全局
                 * */
                initFinish: false,
                that: this
            }
        },
        mounted() {
            this.changeBook(this.bookEnum.BOOK50Words)
        },
        methods: {
            /**
             * 数据加载
             * */
            readExample(bookStr) {
                /**
                 * 建议一行英文、一行中文
                 * @type {string}
                 */
                let phraseList = readParagraph(bookStr)
                this.phraseList = phraseList
                this.message = 'Hello Vue!CC'
                this.initFinish = true
                this.resetShowPhrase()
            },
            resetShowPhrase() {
                this.currentPhrase = this.phraseList[0]
                this.randomPhrase(this.currentPhrase)
                this.currentIndex = 0
            },
            /**
             * 播放处理
             * */
            // 上一个短语
            previousPhrase() {
                let index = this.phraseList.indexOf(this.currentPhrase)
                this.currentIndex = index == -1 ? 0 : (index - 1 < 0 ? this.phraseList.length - 1 : index - 1)
                this.currentPhrase = this.phraseList[this.currentIndex]
                this.randomPhrase(this.currentPhrase)
            },
            // 下一个短语
            nextPhrase() {
                let index = this.phraseList.indexOf(this.currentPhrase)
                this.currentIndex = index == -1 ? 0 : (index + 1 >= this.phraseList.length ? 0 : index + 1)
                this.currentPhrase = this.phraseList[this.currentIndex]
                this.randomPhrase(this.currentPhrase)
            },
            randomPhrase(phrase) {
                debugger
                this.randomWordsSort(phrase.EnglishWordInfo)
            },
            randomWordsSort(englishWordInfo) {
                englishWordInfo.Words.sort(function () {
                    return Math.random() - 0.5
                })
                for (let i = 0; i < englishWordInfo.Words.length; i++) {
                    englishWordInfo.HideWords[i] = toLine(englishWordInfo.Words[i])
                }
            },
            toLine(str) {
                let ret = ''
                for (let i = 0; i < str.length; i++) {
                    ret = ret + '_'
                }
                return ret
            },
            /**
             * 書記切換
             * */
            changeBook(bookEnum) {
                let bookStr = getIndexBook(bookEnum.bookNo)
                this.readExample(bookStr)
            },
            /**
             * 元素操作
             * */
            oneBlockForward(arr, index) {
                if (index > 0) {
                    let item = ''
                    item = arr[index - 1]
                    arr[index - 1] = arr[index]
                    arr[index] = item
                }
            },
            changeShowHide(arr, index) {
                arr[index] = !arr[index]
            },
            selectedWord(word, index) {
                const seccessIndex = this.changeItemGetIndex(word, index)
                this.setButtonWordsClassAndDisabledBtn(word, index, seccessIndex)
            },
            changeItemGetIndex(word, index) {
                // 添加到选择数组的最后一个元素中
                const selectedWords = this.currentPhrase.EnglishWordInfo.SelectedWords
                const successWords = this.currentPhrase.EnglishWordInfo.SuccessWords
                for (let i = 0; i < selectedWords.length; i++) {
                    if (successWords[i] == selectedWords[i]) {
                        continue;
                    } else {
                        selectedWords[i] = word
                        return i
                    }
                }
                return -1
            },
            setButtonWordsClassAndDisabledBtn(word, index, seccessIndex) {
                if (index == -1 || index == null) {
                    return
                }
                const wordsClass = this.currentPhrase.EnglishWordInfo.WordsClass
                if (this.currentPhrase.EnglishWordInfo.SelectedWords[seccessIndex] == this.currentPhrase.EnglishWordInfo.SuccessWords[seccessIndex]) {
                    this.currentPhrase.EnglishWordInfo.WordsEnabled[index] = true
                    return wordsClass[index] = 'btn mr5 mb5 btn-dark'
                }
            },
            /**
             * 样式处理
             * */
            // 按长度取模
            buttonColorClass(index) {
                let arr = this.colorList
                return arr[parseInt(index % arr.length)]
            }
        }
    }).mount('#app')
</script>
<style>
    .langWithe {
        width: 100%;
        min-height: 800px;
        /*border: #7abaff 1px solid;*/
    }

    .h3000 {
        height: 3000px;
    }

    .hide70 {
        opacity: 0.5;
    }

    .mr5 {
        margin-right: 5px;
    }

    .mb5 {
        margin-bottom: 5px;
    }

    .mb25 {
        margin-bottom: 25px;
    }

    .width50 {
        width: 80px;
    }

    .englishColor {
        color: #FFFFFF;
        font-weight: bold;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
        Helvetica, Arial,
        sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
        line-height: 1.2;
    }

    .englishColorYellow {
        color: #ffc107;
        font-weight: bold;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
        Helvetica, Arial,
        sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
        line-height: 1.2;
    }

    .chineseColor {
        line-height: 1.2;
        font-size: 70%;
        color: #00FFFF;
    }

    .cover-container {
        max-width: 442em;
    }

    /*html {*/
    /*    background: #ddd;*/
    /*    height: 100%;*/
    /*    width: 100%;*/
    /*}*/

    /*.picA {*/
    /*    background-image: url(img/image01.jpg);*/
    /*    background-size: cover;*/
    /*    width: 650px;*/
    /*    height: 340px;*/
    /*    border: 5px solid #f0e5ab;*/
    /*    border-radius: 3px;*/
    /*    box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0, 0, 0, 0.2);*/
    /*    padding: 0;*/
    /*    margin: 1rem auto;*/
    /*    position: relative;*/
    /*    overflow: hidden;*/
    /*}*/

    /*.picB {*/
    /*    background-image: url(img/image02.jpg);*/
    /*    background-size: cover;*/
    /*    height: 340px;*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    min-width: 0;*/
    /*    max-width: 650px;*/
    /*    box-sizing: border-box;*/
    /*}*/

    /*.picB:before {*/
    /*    content: "↔";*/
    /*    position: absolute;*/
    /*    background: rgba(0, 0, 0, 0.5);*/
    /*    font-size: 16px;*/
    /*    color: white;*/
    /*    top: 0;*/
    /*    right: 0;*/
    /*    height: 100%;*/
    /*    line-height: 340px;*/
    /*}*/

    /*.resizeElement {*/
    /*    resize: horizontal;*/
    /*    overflow: scroll;*/
    /*    opacity: 0;*/
    /*    position: relative;*/
    /*    top: 50%;*/
    /*    left: 0px;*/
    /*    height: 15px;*/
    /*    max-width: 650px;*/
    /*    min-width: 15px;*/
    /*    width: 0;*/
    /*    cursor: move;*/
    /*    transform: scaleY(35);*/
    /*    transform-origin: center center;*/
    /*    animation: delta 5s normal ease-in-out 1s;*/
    /*}*/

    /*.picAfont {*/
    /*    position: absolute;*/
    /*    border: 1px solid #0b2e13;*/
    /*    width: 100%;*/
    /*}*/

    /*.picBfont {*/
    /*    position: absolute;*/
    /*}*/

    /*@keyframes delta {*/
    /*    30% {*/
    /*        width: 0;*/
    /*    }*/
    /*    60% {*/
    /*        width: 350px;*/
    /*    }*/
    /*    100% {*/
    /*        width: 0;*/
    /*    }*/
    /*}*/

    /*.fontSuccess {*/
    /*    color: #FFFFFF;*/
    /*}*/

    /*.fontWarning {*/
    /*    color: #dc3545;*/
    /*}*/
</style>
</body>
</html>
